<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 700px;
      height: 200px;
      /* background-color: red; */
    }
    .red {
      display: inline-block;
      height: 30px;
      width: 5px;
      background-color: red;
    }
    .green {
      background-color: green;
    }
  </style>
</head>

<body>
  <div class="box">

    选择文件(可多选):
    <input type="file" id="f1" multiple /><br /><br />

    <div id="progress">
      <span class="red"></span>
    </div> <br /><br />
    标题：<input type="text" name="title" id="title" /><br /><br /><br />
    <button type="button" id="btn-submit">上 传</button>

  </div>
  <script>

    function submitUpload() {
      var progressSpan = document.getElementById('progress').firstElementChild;
      var fileList = document.getElementById('f1').files;
      progressSpan.style.width = '10px';
      progressSpan.classList.remove('green');

      if (!fileList.length) {
        alert('请选择文件');
        return;
      }

      var fd = new FormData();   //构造FormData对象

      // fd.append('title', document.getElementById('title').value);

      for (var i = 0; i < fileList.length; i++) {
        fd.append('f1', fileList[i]);//支持多文件上传
      }

      var xhr = new XMLHttpRequest();   //创建对象
      xhr.open('POST', 'http://localhost:8100/', true);
      
      xhr.onreadystatechange = function () {
        console.log('state change', xhr.readyState);
        if (xhr.readyState == 4) {
          var obj = JSON.parse(xhr.responseText);   //返回值
          console.log(obj);
          if (obj.fileUrl.length) {
            alert('上传成功');
          }
        }
      }

      xhr.onprogress = updateProgress;
      xhr.upload.onprogress  = updateProgress;
      function updateProgress(event) {
        console.log(event);
        if (event.lengthComputable) {
          var completedPercent = (event.loaded / event.total * 100).toFixed(2);
          progressSpan.style.width = completedPercent + '%';
          progressSpan.innerHTML = completedPercent + '%';
          if (completedPercent > 90) {//进度条变色
            progressSpan.classList.add('green');
          }
          console.log('已上传', completedPercent);
        }
      }
      //注意 send 一定要写在最下面，否则 onprogress 只会执行最后一次 也就是100%的时候
      xhr.send(fd);//发送时  Content-Type默认就是: multipart/form-data; 
    }
    //绑定提交事件
    document.getElementById('btn-submit').addEventListener('click', submitUpload);


  </script>

</body>

</html>